<template>
  <div class>
    <div class="see">信箱管理-查看</div>
    <el-form :model="formInline" label-width="100px" size="mini">
      <el-form-item label="标题">
       <div class="exhibition"><span style="margin-left:20px">{{title}}</span></div> 
        
      </el-form-item>
      <el-form-item label="姓名">
      <div class="exhibition"><span style="margin-left:20px">{{name}}</span></div> 
      </el-form-item>

      <el-form-item label="联系方式">
        <div class="exhibition"><span style="margin-left:20px"></span></div>
      </el-form-item>
      <el-form-item label="时间">
       <div class="exhibition"><span style="margin-left:20px">{{time}}</span></div>
      </el-form-item>
      <el-form-item label="内容">
        <div class="exhibitions"><span style="margin-left:20px">{{content}}</span></div>
      </el-form-item>
    </el-form>
    <div>
      <span class="enclosure">附件：附件附件附件.PDF</span>
      <span class="look"> 查看 </span>
      <span class="download">下载</span>
    </div>
    <div class="sees">信箱管理-回复</div>
    <el-form :model="formInline" label-width="100px" size="mini">

      <el-form-item label="内容">
        <el-input
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 10 }"
          placeholder="请输入内容"
          v-model="textarea"
          style="width: 500px"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-button type="info" plain class="click">上传附件</el-button>
    <span class="file">附件的文件名.PPT</span>
    <el-button type="success" plain class="clicks" @click="reply">提交</el-button>
  </div>
</template>
<script >
import * as api from "../api";
export default {
  name: "",
  components: {},
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      textarea: "",
      value: "",
      time: "",
      name:"",
      title:"",
      content:"",
      input:""
    };
  },
  created() {
    // this.mail()
  },
  methods: {
    // 邮件查询
     mail() {
      const params = {
        userId: 1,
      };
      api.mailQuery(params).then((res) => {
          console.log(222,res.data.list[12]);
        this.time = res.data.list[12].createdDate
        this.name = res.data.list[12].userName
        this.content = res.data.list[12].mailMessage
        this.title = res.data.list[12].mailName
      });
    },
    reply(){
      const params = {
        mailId: 46,
        ReceiveMessage: this.textarea
      };
      api.reply(params).then((res) => {
          console.log(111,res);
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.clicks{
  margin-left: 190px;
  background-color: rgba(104, 120, 240, 1);
  color: aliceblue;
}
.exhibitions{
   width: 500px;
   height: 200px;
 border:1px solid;
border-color:#707070;
border-radius:5px; 
}
.exhibition{
  width: 200px;
 border:1px solid;
border-color:#707070;
border-radius:5px; 
}
.file{
  width: 162px;
height: 20px;
font-family: Source Han Sans CN;
color: #cbcbcb;
font-size: 14px;
margin-left: 20px;
}
.click{
  margin-left: 100px;
  background-color: rgba(104, 120, 240, 1);
  color: aliceblue;
}
.download{
height: 20px;
font-family: Source Han Sans CN;
color: #fb534b;
font-size: 14px;
}
.look {
  height: 20px;
  font-family: Source Han Sans CN;
  color: #fb534b;
  font-size: 14px;
  margin-left: 30px;
}
.enclosure {
  height: 20px;
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 14px;
  margin-left: 100px;
}
.sees {
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 700;
  color: #666666;
  font-size: 20px;
  margin-left: 40px;
  margin-bottom: 20px;
  margin-top: 110px;
}
.see {
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 700;
  color: #666666;
  font-size: 20px;
  margin-left: 40px;
  margin-bottom: 20px;
}
.line {
  margin-left: 80px;
  margin-top: 10px;
  height: 5px;
  width: 85%;
  background-color: #e4e4e4;
}
.static {
  margin-left: -13px;
  margin-top: 15px;
}
.information {
  margin-left: 78px;
}
.frame {
  margin-left: 76px;
  margin-top: 15px;
}
.size {
  margin-left: 76px;
  margin-top: 15px;
}
.picture {
  width: 366px;
  height: 181px;
  background-color: #dedede;
  margin-left: 76px;
  margin-top: 15px;
}
.chart {
  margin-left: 24px;
  margin-top: 15px;
}
.multiple > span {
  margin-left: 15px;
}
.multiple {
  margin-left: 40px;
  margin-top: 15px;
}
.release {
  margin-left: 8px;
  margin-top: 15px;
}
.choice {
  margin-top: 15px;
  margin-left: 41px;
}
.describe_left {
  width: 40px;
  line-height: 40px;
}
.describe {
  display: flex;
  margin-top: 15px;
  width: 1000px;
  margin-left: 40px;
}
.whole_bot {
  width: 715px;
  line-height: 40px;
}
.whole {
  height: 515px;
  display: flex;
  margin-top: 15px;
  width: 1034px;
  margin-left: 8px;
}
.column_bot {
  width: 40px;
  line-height: 40px;
}
.column {
  display: flex;
  margin-top: 15px;
  width: 1000px;
  margin-left: 40px;
}
</style>
